<template>
  <el-popover placement="bottom" width="180" trigger="click">
    <div>请您按照规定的模版下载好后再上传！</div>
    <div id="elpever">
      <el-button
        size="small"
        class="select"
        type="warning"
        @click="exportCurrentPage"
        >下载模版</el-button
      >

      <input
        ref="fileRef"
        title=""
        type="file"
        name="file"
        id="uploadspop"
        style="visibility: hidden"
        @change="change"
      />
      <el-button size="small" class="select" type="warning" @click="edinput"
        >上传模版</el-button
      >
    </div>
    <el-button
      size="small"
      slot="reference"
      class="select"
      icon="el-icon-edit"
      type="warning"
      >导入</el-button
    >
  </el-popover>
</template>
<script>
import { exportTableDataPEO, insertTableDataPOP } from "../request";
import { timestamp } from "ali-oss";
export default {
  name: "SJmodel",
  props: ["config"],
  data() {
    return {
      current: 1,
      // privateConfig: {
      //     url: '/deviceManager/exportExcel',
      //     method: 'POST',
      //     mineId: false,
      //     currentPage: 1,
      //     pageSize: 10,
      //     filename: '',
      //     data: {}
      // }
      privateConfig: this.config,
      url1: "",
      url2: "",
      popinp: "",
      file: "",
    };
  },
  inject: ["reload"],
  methods: {
    edinput() {
      var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      document.getElementById("uploadspop").dispatchEvent(e);
    },
    change(e) {
      //打印上传的文件目录

      const param = new FormData();

      param.append("file", e.target.files[0]);
      let obj = {
        url: this.url2,
        method: "POST",
        data: {
          mineId: this.$store.state.mineId,
        },
        formData: param,
      };

      insertTableDataPOP(obj).then((res) => {
        console.log(res);
       this.reload()
      });
    },

    exportCurrentPage() {
      if (!this.$routeParam()) {
        this.privateConfig.currentPage = 1;
      } else {
        this.privateConfig.currentPage = this.$currentPage("page");
      }
      this.request();
    },
    exportAllPage() {},
    request() {
      let requestJson = this.privateConfig;
      console.log(requestJson);

      if (requestJson.mineId) {
        requestJson.data.mineId = this.$store.state.mineId;
        requestJson.url = this.url1;
      }

      exportTableDataPEO(requestJson)
        .then((response) => {
          console.log(response);
          const blob = new Blob([response]);
          const elink = document.createElement("a");
          var fileName = "";
          if (this.privateConfig.filename) {
            let timestamp = new Date().getTime();
            fileName =
              this.privateConfig.filename + "_" + this.timestamp() + ".xls";
          } else {
            fileName = "基础信息模版.xls";
          }
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    timestamp() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      return "" + yy + mm + dd + hh + mf + ss;
    },
  },
  watch: {},
  created() {
    let arr = this.privateConfig.url.split("|");

    this.url1 = arr[0];
    this.url2 = arr[1];
  },
};
</script>
<style lang="scss" scoped>
.file-input {
  visibility: hidden;
}
#elpever {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
